<template>
  <div>
    <div class="paiming">
      <span @click="fun()">&lt;</span>
      <div>
        <p>店铺热榜</p>
        <p>店铺优质商品 一榜打尽</p>
        <p>河南郑州 翟** 刚刚下单啦</p>
      </div>
    </div>
  <div class="box">
   
     <section class="list" v-for="(v,i) in arr" :key="i">
      <img  :src="v.img"  />
      <div class="mingxi">
        <p>[完美日记]至臻柔色丝绒唇釉「天鹅绒」唇釉 锦鲤色</p>
        <p>爆款</p>
        <div class="price">
          <div><span>￥59.90</span><span><del>￥120</del></span></div>
          <div>马上抢</div>
        </div>
      </div>
    </section>
  </div>
   
  </div>
</template>

<script>
import getlink from "@/apis/getapi.js";
export default {
   data() {
    return {
      arr: "",
    };
  },
  
 mounted() {
    getlink("/data/list/lists").then((ok) => {
      console.log(ok.data.data);
      this.arr = ok.data.data;
    });
  },
  methods: {
    fun() {
      this.$router.push("./shopping");
    },
  },
};
</script>

<style scoped>

.paiming {
  height: 2.4rem;
  width: 100%;
 background-image: linear-gradient(to bottom right,red 20%,rgb(230, 92, 38) 50%,rgb(202, 103, 21) 100%);
  position: relative;
}
.box{
  position: absolute;
  top:1.5rem
}
.paiming span {
  font-size: 0.3rem;
  line-height: 0.3rem;
  color: gray;
  margin-left: 0.2rem;
}
.paiming div {
  text-align: center;
  height: 0.8rem;
}
.paiming div p:nth-child(1) {
  font-size: 0.3rem;
  font-weight: 600;
  color: white;
  margin-bottom: 0.15rem;
}
.paiming div p:nth-child(2) {
  color: white;
  font-size: 0.14rem;
}
.paiming div p:nth-child(3) {
  color: white;
  width: 1.5rem;
  height: 0.18rem;
  line-height: 0.18rem;
  background: rgba(220, 220, 220, 0.329);
  text-align: center;
  margin: 0.15rem auto;
  border-radius: 0.1rem;
}
.list{
  width: 320px;
  height: 135px;
  border-radius: .2rem;
  display: flex;
 padding: 10px 10px; 
  justify-content: space-between;
   background-color: white;
   margin: .1rem .18rem  ;
   border: .02rem solid rgba(128, 128, 128, 0.151) ;
   box-shadow:.05rem .03rem rgba(231, 230, 230, 0.37);
}
.list img{
  width: 120px;
  height: 120px;

}
.list .mingxi{
  width: 180px;
  padding-top: .1rem;
}
.price{
  display: flex; 
  justify-content: space-between;
  margin-top: .4rem;
  height: 27px;
 line-height: 27px;
}
.mingxi p:nth-child(1){
  font-weight:600 ;
  line-height: .18rem;
}
.mingxi p:nth-child(2){
  color: red;
  width: .3rem;
  text-align: center;
  border-radius: .1rem;
  background-color: rgb(245, 179, 179);
}
.price span:nth-child(1){
  color: red;
  font-size: .2rem;
  font-weight: 600;
}
.price div:nth-child(2){
font-weight: 600;
width: 50px;
height: 25px;
line-height:.25rem ;
text-align: center;
background-color: red;
color: white;
border-radius: .2rem;
}
</style>